<template>
<div style="
    margin-left :10px;
    margin-right:10px;
">
    <el-badge :value="num" class="item" type="primary">
      <div :style="
        `color : white;
        font-size : 12px;
        background-color : ${(config.color === '') ? config.backcolor : config.color};
        display: table;
        font-family: 'Roboto Slab', serif;
        padding-left : 12px;
        padding-right : 12px;
        padding-top : 5px;
        padding-bottom : 5px;
        border-radius : .5em;` 
        ">
            <slot></slot>
        </div>
    </el-badge>
</div>

</template>

<script>
import { reactive ,computed } from "vue"
import { useStore } from "vuex"

export default {
    name : "KTag",
    props : ['color', 'num'],
    setup(props) {
        let store = useStore()
        let config = reactive({
            color : "",
            backcolor : computed(() => store.state.Dialog.curGlobalColor)
        })
        if (props.color === undefined)
            config.color = ""
        else 
            config.color = props.color

        return {
            config
        }
    }
}
</script>

<style>

</style>